<template>
  <div id="banner" @mouseover="showset" @mouseout="hideset">
    <div class="header" :style="{backgroundImage: backurl}">
      <div class="banner_con" :style="{visibility:ifhidden,color:bandata.fontcolor}">
        <div class="information">
          <div class="name">{{taskdata.ActivityTitle}}</div>
          <div class="timeadress">
            <div class="time">
              <i class="iconfont icon-activity_fill"></i>
              <span> 时间 </span> {{taskdata.StartTime}} ~ {{taskdata.EndTime}} </div>
            <div class="adress">
              <i class="iconfont icon-coordinates_fill"></i>
              <span> 地址 </span> {{taskdata.FullAddress}}</div>
            <div class="time" v-show="taskdata.CutOffTime">
              <i class="iconfont icon-clock_fill"></i>
              <span> 报名截止 </span> {{taskdata.CutOffTime}} </div>
          </div>
          <div class="or" v-show="taskdata.Sponsor.length&&taskdata.Sponsor[0].Name!=''">
            <i>活动由</i>
            <span v-for="(item,index) in taskdata.Sponsor" class="zhuban"> {{index==0?"":"、" }} {{ item.Name }} </span>
            <i>主办</i>
          </div>
        </div>
        <div class="e_frametop"></div>
        <div class="e_framebottom"></div>
      </div>
    </div>
    <div class="attend">
      <div class="navButton active">活动内容</div>
      <a class="navButton" :href="personalCenter">个人中心</a>
      <a :href="signUp" class="btn">{{btnName}}</a>
    </div>
    <div class="mask" v-show="maskshow">
      <div class="settingbtn" @click="headset" style="right:30px">设置</div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    props: ["taskdata"],
    data: function () {
      return {
        maskshow: false,
      }
    },
    computed: {
      ...mapState([
        "pageConfig",
        "parameters"
      ]),
      bandata(){
        return this.pageConfig[this.pageConfig.theme];
      },
      ifhidden: function () {
        return this.bandata.type == 1 ? 'visible' : 'hidden'
      },
      backurl: function () {
        return 'url(' + this.bandata.background + ')'
      },
      personalCenter:function(){
        return "/Event/Registration/RegisterCertificate?_taskId_=" + this.taskdata.TaskId
      },
      signUp: function () {
        if (this.taskdata.IsEventOver || this.taskdata.IsEnd) {
          return 'javascript:;';
        } else {
          if (this.taskdata.Mode == 2) {
            return "/Event/Registration/FillInfo?_taskId_=" + this.taskdata.TaskId;
          } else if (this.taskdata.Mode == 1) {
            return "#Tickettype";
          }
        }
      },
      btnName: function () {
        if (this.taskdata.IsEventOver) {
          return "活动结束"
        } else {
          if (this.taskdata.IsEnd) {
            return "报名截止"
          } else {
            return "我要报名"
          }
        }
      }
    },
    methods: {
      showset: function () {
        this.maskshow = true;
      },
      hideset: function () {
        this.maskshow = false;
      },
      headset: function () {
       this.$store.commit({
          type: 'showsetbox',
          setMod: 'Setbanner',
          index: -1
        })
      }
    }
  }
</script>

<style>
  .navButton {
    float: left;
    line-height: 50px;
    font-size: 14px;
    padding: 0 10px;
    cursor: pointer;
  }

  .active {
    color: #2196f3;
    font-weight:600;
  }
</style>